本日小作品：
https://codepen.io/linchinhsuan/pen/NWNBrxx

練習重點摘要：

justify-content: space-between;
在導覽列因為左邊是logo右邊是導覽列所以使用flex然後讓logo還有ul各分到左右。

text-indent: 101%;
white-space: nowrap;
overflow: hidden;
這三個是一體的，在左上方的logo，是包同時還有一段文字（放網站的名稱），為了能夠有SEO效果，文字不能沒有，但這邊我們只想要看到logo圖片本身。所以我們使用了text-indent: 101%;讓文字縮排到寬度外（以這個小作品為例就是縮排36px多一點），此時一般來說會自動換行撐開高度，所以要用white-space: nowrap;避免這件事情發生。最後，因為所有的文字都超出了容器寬度，就可以使用overflow: hidden;將文字隱藏起來達到我們要的效果。

position: absolute;

為了讓50%off能夠放到圖片右上角，我們將其改為絕對定位，定位定在父元素<div class="container">上（因此我們要在父元素寫上position: relative;）。值為top: 0;right: 0;定在右上角。

background: url(https://cdn......略) no-repeat center center/100% 100%;

為background的簡寫，url的括號內放入圖片位址，no-repeat則避免圖片自動重複。因為background同時有 background-position 和 background-size，兩者都可以用百分比表示，所以寫100% 100%會不知道是前者還是後者，因此需要以background-position / background-size的方式表示，出現/算是比較反直覺（？）的一個案例。
這裡是將圖片置中，並且寬高都為100%。

transition: all .7s ease;

當滑鼠移至圖片上後，會讓.tool:hover發生作用，此時我設定寬高各為150%，就產生了放大鏡效果。為了使效果絲滑流暢，使用transition。他可以將兩個狀態之間的轉場動作生成出來（有點補禎的感覺（？）），這裡的值分別是所有的屬性改變/動畫秒數/(底類時間)/貝茲曲線。
這次並沒有用到底類的效果，而貝茲曲線就是很難用文字表達的，總之就是運動的感覺（？），在剪輯軟體中常見的說法是「緩入」、「緩出」等等。
這裡提供一個可以視覺看各種貝茲取線的連結：
https://matthewlein.com/tools/ceaser

－－－

本日結語：
今天是第三天，第一次嘗試做放大鏡效果，若有誤之處懇請各路高手賜教！